<!DOCTYPE html>
<html>

	<head>
		<link rel="stylesheet" href="<?php echo APP_TEMPLATES_URL;?>/css/checkbix.min.css" />
		<link rel="stylesheet" href="<?php echo APP_TEMPLATES_URL;?>/css/public.css" />
		<script src="<?php echo APP_TEMPLATES_URL;?>/js/checkbix.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			Checkbix.init();
				$(function(){
		// 所有复选(:checkbox)框点击事件
				$("input[name=boxlist]").click(function() {
					    $("input[name=boxlist]").each(function() {
							$(this).attr("checked", false);
						});
						$(this).attr("checked", true);
				});

	});
		</script>

	</head>

	<body>
	<form id="buy_form" method="post" action="index.php">
		<input id="act" name="act" type="hidden" value="pay" />
		<input id="op" name="op" type="hidden" value="real_order" />
		<input type="hidden" id="pay_sn" name="pay_sn" value="<?php echo $output['pay_in']['pay_info']['pay_sn'] ?>">
		<input type="hidden" id="payment_code" name="payment_code" value="predeposit">
		<input type="hidden" name="password_callback" id="password_callback" value="">
		<input type="hidden" name="pd_pay" id="pd_pay" value="">

		<!-- 导航 -->
		<div class="mui-bar mui-bar-nav bj">
            <a href="<?php echo urlApp('order','orderstate'); ?>">
			<button id="zhuce" class="mui-btn mui-btn-link mui-btn-nav mui-pull-left zys">
				<img style=" max-width: 70%; vertical-align: middle;" src="<?php echo APP_TEMPLATES_URL;?>/images/back.png" />
			</button></a>

			<h1 class="mui-title"><label style="font-size: 18px;vertical-align: middle; line-height: 44px;">订单支付</label></h1>
		</div>
		<div>
			<!--
            	作者：offline
            	时间：2016-11-17
            	描述：列表按钮
            -->
			<div>
<!--				<div style="height: 10px; background: #F4F4F4; clear: both;"></div>-->
				<!--<ul class="across">
					<li class="side notactive">
						<div class="countone notone">
							<a href="javascript:();">
								<label for="mycheckbox1"><img style="vertical-align: middle; margin-right: 10px;" src="<?php echo APP_TEMPLATES_URL;?>/images/z1.png" />余额</label>
								<label style="text-align: right; color: #999999;">
									可用金额<?php echo $output['pay_in']['pay_info']['member_available_pd'] ?>元&nbsp;&nbsp;
									<input id="mycheckbox1" type="checkbox" class="checkbix" data-shape="circled" name="boxlist" data-color="orange" data-text="" value="1">
								</label>
							</a>
							<span id="pd_password" style="display: none"><br/>
							<!--请输入支付密码
							<input type="password" value="" name="password" id="pay-password" maxlength="35" autocomplete="off"></span>-->
				<!--</div>
            </li>
        </ul>-->
				<div style="height: 10px; background: #F4F4F4; clear: both;"></div>
				<ul class="across">
					<li class="side" style="display: none;">
						<div class="countone">
							<a href="#">
								<label><img style="vertical-align: middle; margin-right: 10px;" src="<?php echo APP_TEMPLATES_URL;?>/images/z2.png" />银行卡支付</label>
								<label style="text-align: right;"></label>
							</a>
						</div>
					</li>
					<?php $user_agent = $_SERVER['HTTP_USER_AGENT'];
					if (strpos($user_agent, 'MicroMessenger') === false) {?>
					<li class="side notactive">
						<div class="countone notone">
							<a href="javascript:();">
								<label for="mycheckbox2"><img style="vertical-align: middle; margin-right: 10px;" src="<?php echo APP_TEMPLATES_URL;?>/images/z3.png" />支付宝支付</label>
								<label style="text-align: right;">
									&nbsp;<input id="mycheckbox2" type="checkbox" class="checkbix" data-shape="circled" name="boxlist" data-color="orange" data-text="" value="8" checked="checked">
								</label>
							</a>
						</div>
					</li>
					<?php }else {?>
					<li class="side notactive">
						<div class="countone notone">
							<a href="javascript:();">
								<label for="mycheckbox3"><img style="vertical-align: middle; margin-right: 10px;" src="<?php echo APP_TEMPLATES_URL;?>/images/z4.png" />微信支付</label>
								<label style="text-align: right;">
									&nbsp;<input id="mycheckbox3" type="checkbox" class="checkbix" data-shape="circled" name="boxlist" data-color="orange" data-text="" value="8">
								</label>
							</a>
						</div>
					</li>
					<?php }?>
				</ul>
			</div>

		</div>
        <div style="height: 10px; background: #F4F4F4; clear: both;"></div>
		<style>
		.indexm{display: none !important;}
			.buttomcop {
				font-size: 20px;
				line-height: 70px;
				color: #FFFFFF;
				background: #f0b33e;
				float: left;
				text-align: center;
				width: 100%;
				margin-top: -1px;
			}

			.qujiesuan {
				background: #FFFFFF;
				position: fixed;
				bottom: 0px;
				width: 100%;
				border-top: 1px solid #EEEEEE;
			}
		</style>

		<div class="qujiesuan">
			<table width="100%">
				<tr>
					<td style="font-size: 14px; text-align: right;" class="veralignmiddle">
						<label class="cor666666">支付：</label>
						<span class="corc10a1f">￥<label id="zong" class="corc10a1f ft13"><?php echo $output['pay_in']['pay_info']['pay_amount'] ?></label></span>
					</td>
					<td class="veralignmiddle" style="text-align: center;min-width: 50px;"><label class="cor666666 ft13">免运费</label></td>
					<td style="min-width: 100px;">
						<a class="buttomcop" onclick="paySubmit()">付款</a>
					</td>
				</tr>
			</table>
		</div>



<style>
	.mui-popup-backdrop {
		position: fixed;
		z-index: 998;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		-webkit-transition-duration: 400ms;
		transition-duration: 400ms;
		opacity: 0;
		background: rgba(0, 0, 0, .4)
	}

	.mui-popup-backdrop.mui-active {
		opacity: 1
	}

	.mui-popup {
		position: fixed;
		z-index: 10000;
		top: 50%;
		left: 50%;
		display: none;
		overflow: hidden;
		width: 270px;
		-webkit-transition-property: -webkit-transform, opacity;
		transition-property: transform, opacity;
		-webkit-transform: translate3d(-50%, -50%, 0) scale(1.185);
		transform: translate3d(-50%, -50%, 0) scale(1.185);
		text-align: center;
		opacity: 0;
		color: #000;
		border-radius: 13px
	}

	.mui-popup.mui-popup-in {
		display: block;
		-webkit-transition-duration: 400ms;
		transition-duration: 400ms;
		-webkit-transform: translate3d(-50%, -50%, 0) scale(1);
		transform: translate3d(-50%, -50%, 0) scale(1);
		opacity: 1
	}

	.mui-popup.mui-popup-out {
		-webkit-transition-duration: 400ms;
		transition-duration: 400ms;
		-webkit-transform: translate3d(-50%, -50%, 0) scale(1);
		transform: translate3d(-50%, -50%, 0) scale(1);
		opacity: 0
	}

	.mui-popup-inner {
		position: relative;
		padding: 15px;
		border-radius: 13px 13px 0 0;
		background: rgba(255, 255, 255, .95)
	}

	.mui-popup-inner:after {
		position: absolute;
		z-index: 15;
		top: auto;
		right: auto;
		bottom: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 1px;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		-webkit-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		background-color: rgba(0, 0, 0, .2)
	}

	.mui-popup-title {
		font-size: 18px;
		font-weight: 500;
		text-align: center;
		padding-top: 10px;
	}

	.mui-popup-title+.mui-popup-text {
		font-size: 14px;
		margin-top: 10px
	}

	.mui-popup-buttons {
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		height: 44px;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center
	}

	.mui-popup-button {
		font-size: 17px;
		line-height: 44px;
		position: relative;
		display: block;
		overflow: hidden;
		box-sizing: border-box;
		width: 100%;
		height: 44px;
		padding: 0 5px;
		cursor: pointer;
		text-align: center;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #000;
		background: rgba(255, 255, 255, .95);
		-webkit-box-flex: 1
	}

	.mui-popup-button:after {
		position: absolute;
		z-index: 15;
		top: 0;
		right: 0;
		bottom: auto;
		left: auto;
		display: block;
		width: 1px;
		height: 100%;
		content: '';
		-webkit-transform: scaleX(.5);
		transform: scaleX(.5);
		-webkit-transform-origin: 100% 50%;
		transform-origin: 100% 50%;
		background-color: rgba(0, 0, 0, .2)
	}

	.mui-popup-button:first-child {
		border-radius: 0 0 0 13px
	}

	.mui-popup-button:first-child:last-child {
		border-radius: 0 0 13px 13px
	}

	.mui-popup-button:last-child {
		border-radius: 0 0 13px
	}

	.mui-popup-button:last-child:after {
		display: none
	}

	.mui-popup-button.mui-popup-button-bold {
		font-weight: 600
	}

	.mui-popup-input input {
		font-size: 14px;
		width: 100%;
		height: 26px;
		margin: 0;
		margin-top: 15px;
		padding: 0 5px;
		border: 1px solid rgba(0, 0, 0, .3);
		border-radius: 0;
		background: #fff
	}

	.che {
		display: none;
	}
</style>
<div class="mui-popup-backdrop mui-active" style="display: none;"></div>
<div class="mui-popup mui-popup-in" style="display: none;">
	<div class="mui-popup-inner">
		<div class="mui-popup-title">你正在进行订单支付</div>
		<div class="mui-popup-text"><input type="password" value="" name="password" id="pay-password" placeholder="请输入交易密码" style="width: 90%;height: 40px;font-size: 14px;"></div>
	</div>
	<div class="mui-popup-buttons"><span class="mui-popup-button" onclick="hideDiv('cancel');">取消</span>
		<span class="mui-popup-button mui-popup-button-bold" onclick="hideDiv('ok');">确定</span></div>
</div>


	</form>
<script type="application/javascript">
	$("#mycheckbox1").bind("click", function () {
		if ($(this).attr('checked')) {
			if(!<?php echo $output['pay_in']['pay_info']['member_paypwd'] ?>){
				if(confirm("您还未设置支付密码，是否要马上设置?")){
					location.href = 'index.php?act=member&op=paymentpassword';
					return false;
				}else{
					return false;
				}
			}

			$(".mui-popup-backdrop").show();
			$(".mui-popup-in").show();
		} else {
			$('#pay-password').val('');
		}
	});
	function hideDiv(op){
		$(".mui-popup-backdrop").hide();
		$(".mui-popup-in").hide();
		if(op=='cancel'){
			$('#pay-password').val('');
		}
	}

	function paySubmit(){
		if($('#mycheckbox1').attr('checked')){//余额支付
			if ($('#pay-password').val() == '') {
				alert('请输入交易密码');
				return false;
			}
			var yu_e = <?php echo $output['pay_in']['pay_info']['member_available_pd'] ?>;
			var needpay = <?php echo $output['pay_in']['pay_info']['pay_amount'] ?>;
			if(yu_e<needpay){
				alert('余额不足，请先充值');
				return false;
			}

			$('#password_callback').val('');
			$.get("index.php?act=pay&op=check_pd_pwd", {'password':$('#pay-password').val()}, function(data){
				if (data == '1') {
					$('#pd_pay').val('1');
					$('#payment_code').val('predeposit');
					$('#password_callback').val('1');
					$("#buy_form").submit();
				} else {
					$('#pay-password').val('');
					alert('支付密码错误');
				}
			});
		}
		else if($('#mycheckbox2').attr('checked')){//支付宝支付
			if(isWeiXin()){
				alert('微信内暂不支持支付宝支付，请在其他浏览器中进行支付');
				return;
			}
			$('#payment_code').val('alipay');
			$("#buy_form").submit();
		}
		else if($('#mycheckbox3').attr('checked')){//微信
//			alert('暂不支持微信支付');
//			return;
			$('#payment_code').val('wxpay_jsapi');
			$("#buy_form").submit();
		}else{
			alert('请选择支付方式');
		}
	}
	function isWeiXin() {
		var ua = window.navigator.userAgent.toLowerCase();
		if (ua.match(/MicroMessenger/i) == 'micromessenger') {
			return true;
		} else {
			return false;
		}
	}
</script>

	</body>

</html>